<template>
  <div class="app-container">
    <el-card class="w-96">
      <div slot="header" class="flex justify-between items-center">
        用户中心
        <el-button type="primary" @click="handleEdit">编辑</el-button>
      </div>
      <div class="userInfo flex flex-col justify-center items-center">
        <div class=" avatar">
          <img :src="userInfo.avatar" alt=""/>
        </div>
        <div class="info-item">
          <p class="label">账号：</p>
          <p class="value">{{ userInfo.admin_name }}</p>
        </div>
        <div class="info-item">
          <p class="label">邮箱：</p>
          <p class="value">{{ userInfo.email }}</p>
        </div>
        <div class="info-item">
          <p class="label">手机号：</p>
          <p class="value">{{ userInfo.phone_number }}</p>
        </div>
        <div class="info-item">
          <p class="label">姓名：</p>
          <p class="value">{{ userInfo.realname }}</p>
        </div>
      </div>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" title="编辑信息" width="30%">
      <el-form :model="form" :rules="rules" label-width="100px">
        <el-form-item label="头像">
          <el-upload
            :before-upload="beforeAvatarUpload"

            :on-success="handleAvatarSuccess"
            :show-file-list="false"
            action=""
            class="avatar-uploader"
          >
            <img v-if="form.avatar" :src="form.avatar" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-button v-show="form.avatar" type="danger" @click="handleDelete"
          >删除
          </el-button
          >
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input
            v-model="form.phone_number"
            placeholder="请输入手机号码"
            style="width: 80%;"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
            v-model="form.email"
            placeholder="请输入邮箱"
            style="width: 80%;"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            show-password
            style="width: 80%;"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            v-model="form.confirm_password"
            placeholder="请确认密码"
            show-password
            style="width: 80%;"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUserInfo, postUserInfo } from '@/api/dashboard/index'
import md5 from 'js-md5'

export default {
  name: '',
  data() {
    return {
      userInfo: {},
      dialogVisible: false,
      /**图片上传 */



      form: {
        avatar: undefined,
        phone_number: undefined,
        email: undefined,
        password: undefined,
        confirm_password: undefined
      },
      rules: {}
    }
  },
  created() {
    this.handleGetUserInfo()
  },
  methods: {
    handleGetUserInfo() {
      getUserInfo().then(res => {
        this.userInfo = res.data
      })
    },
    handleAvatarSuccess(res) {
      this.form.avatar = res.data.url
    },
    handleDelete() {
      this.form.avatar = undefined
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    handleConfirm() {
      console.log(this.form)
      let data = {}
      for (let key in this.form) {
        if (key.includes('password')) {
          data[key] = md5(this.form[key])
        } else {
          data[key] = this.form[key]
        }
      }
      postUserInfo(data).then(res => {
        if (res.code === 200) {
          this.dialogVisible = false
          this.handleGetUserInfo()
          this.$message.success('修改成功')
        }
      })
    },
    handleEdit() {
      this.dialogVisible = true
      this.form.avatar = this.userInfo.avatar
      this.form.phone_number = this.userInfo.phone_number
      this.form.email = this.userInfo.email
    }
  }
}
</script>
<style lang="scss" scoped>
.userInfo {
  .avatar {
    width         : 60px;
    height        : 60px;
    border        : 1px solid #989898;
    border-radius : 10px;
  }

  .info-item {
    width      : 100%;
    margin-top : 10px;
    display    : flex;
    font-size  : 18px;

    .label {
      width         : 100px;
      padding-right : 10px;
      text-align    : right;
    }

    .value {
      font-weight : 600;
    }
  }
}

::v-deep .avatar-uploader .el-upload {
  border        : 1px dashed #d9d9d9;
  border-radius : 6px;
  cursor        : pointer;
  position      : relative;
  overflow      : hidden;
}

::v-deep .avatar-uploader .el-upload:hover {
  border-color : #409eff;
}

::v-deep .avatar-uploader-icon {
  font-size   : 28px;
  color       : #8c939d;
  width       : 80px;
  height      : 80px;
  line-height : 80px;
  text-align  : center;
}

::v-deep .avatar {
  width   : 80px;
  height  : 80px;
  display : block;
}
</style>
